<script lang="ts" setup>

import { Message } from '@arco-design/web-vue'
import {
  deleteProcessInstance,
  getProcessInstanceList,
  suspendOrActivateProcessInstance
} from '@/api/activiti/ProcessInstance'
import { defineComponent, ref } from 'vue'
import { getHistoryInfo } from '@/api/activiti/history'
import { getProcessDefinitionXml } from '@/api/activiti/ProcessDefinition'
import BpmnDemo from '@/views/workflow/components/bpmn.vue'

defineComponent({
  name: 'Instance'
})

// 表格
const instanceList = ref([])

const bpmnDemo = ref(null)

// 分页
const queryParams = ref({
  current: 1,
  pageSize: 10,
  total: 0
})

/**
 * 获取列表
 */
async function getList() {
  const { data: { data, total } } = await getProcessInstanceList(queryParams.value)
  instanceList.value = data
  queryParams.value.total = total
}

/**
 * 分页更改
 */
function onPageChange(page) {
  queryParams.value.current = page
  getList()
}

/**
 * 修改流程实例状态
 */
async function updateStatus(id) {
  const { data } = await suspendOrActivateProcessInstance(id)
  if (data) {
    await getList()
  }
}

/**
 * 删除流程定义
 */
async function handleDelete(id) {
  const { data } = await deleteProcessInstance(id)
  if (data) {
    Message.success('删除成功')
    await getList()
  }
}

/**
 * 查看进度
 */
async function showProgress(record) {
  // 获取历史高亮信息
  const { data } = await getHistoryInfo(record.id)
  // 获取xml信息
  const xmlStr = await getProcessDefinitionXml({
    deploymentId: record.processDefinitionId,
    resourceName: record.resourceName
  })
  if (xmlStr) {
    bpmnDemo.value.setColor(xmlStr.msg, data)
  } else {
    Message.error('获取流程定义失败')
  }
}

getList()

</script>

<template>
  <div class="container">
    <Breadcrumb :items="['menu.workflow', 'menu.workflow.instance']" />
    <a-card class="general-card" :title="$t('menu.workflow.instance')">
      <a-divider style="margin-top: 0" />
      <a-table :data="instanceList" :pagination="queryParams" @page-change="onPageChange">
        <template #columns>
          <a-table-column title="编号" tooltip ellipsis align="center" data-index="id" />
          <a-table-column title="名称" align="center" data-index="name" />
          <a-table-column title="流程定义编号" align="center" tooltip ellipsis data-index="processDefinitionId" />
          <a-table-column title="状态" align="center">
            <template #cell="{record}">
              <a-tag :key="record.id" :color="record.status === 'RUNNING' ? '#00b42a' : '#ff5722'">
                {{ record.status === 'RUNNING' ? '运行中' : '已挂起' }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="创建时间" :width="200" align="center" data-index="startDate" />
          <a-table-column title="版本" align="center" data-index="version" />
          <a-table-column title="操作" align="center" :width="200">
            <template #cell="{record}">
              <a-space>
                <a-button
                  type="primary" :status="record.status === 'RUNNING' ? 'success' : 'warning'" size="mini"
                  @click="updateStatus(record.id)">
                  {{ record.status === 'RUNNING' ? '挂起' : '激活' }}
                </a-button>
                <a-button type="primary" size="mini" @click="showProgress(record)">
                  进度
                </a-button>
                <a-popconfirm content="确认要删除吗" type="error" @ok="handleDelete(record.id)">
                  <a-button type="primary" status="danger" size="mini">删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>

      <BpmnDemo ref="bpmnDemo" />

    </a-card>
  </div>
</template>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}

:deep(.arco-upload-progress) {
  display: none;
}

.box {
  display: flex;
  height: 100vh;

  #js-canvas {
    flex-grow: 1;
    overflow: hidden;
  }

  #js-properties-panel {
    height: 100vh;
    overflow-y: auto;
  }
}

</style>